<template>
  <div>
    <a-modal
      title="指标专题详情"
      :visible="visible"
      :width="1000"
      wrapClassName="topic-list-dialog"
      @cancel="handleCancel"
    >

      <div class="table-page-search-wrapper">
        <a-form layout="inline">
            <a-row :gutter="24">
                <a-col :md="12">
                    <a-form-item label="指标分类" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                    <a-tree-select
                        :getPopupContainer="trigger => trigger.parentNode"
                        show-search
                        tree-node-filter-prop="title"
                        :replaceFields="replaceFields"
                        v-model="topicId"
                        style="width: 100%"
                        placeholder="请选择"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="indexCatalogArr"
                        @change="getTopicInfo"
                    />
                    </a-form-item>
                </a-col>
                <a-col :md="12">
                    <a-form-item label="信息类型" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                    <a-select
                      v-model="infoType"
                      placeholder="请选择"
                      @change="getTopicInfo"
                    >
                        <a-select-option  :value="item.value" :key="item.value" v-for="item in typeOptions">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        v-if="tableFlag"
        size="middle"
        :rowKey="record => record.id"
        :scroll="{x:false, y: tableHeight}"
        bordered
        :pagination="false"
        :defaultExpandAllRows="true"
        :columns="columns"
        :dataSource="tableData"
        class="j-table-force-nowrap"
      >
        <template slot="countList" slot-scope="text, record">
          <template
            v-for="(item,index) in record.countList"
          >
            <a-button
              type="link"
              :key="'link-'+index"
              @click="showInfoDialog(item.id)"
            >
              {{item.name}}
            </a-button>
            <br :key="'br-' + index">
          </template>
        </template>

      </a-table>

      <template slot="footer">
        <a-button  @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>

    <sc-situation-index-info-modal ref="indexInfoDialog" />

    <sys-data-source-modal ref="dataSourceInfoDialog"/>

    <TopicEditModal
      ref="topicInfoDialog"
      v-if="topicFlag"
      :modalVisible="topicFlag"
      :currentId="topicKey"
      title="详情"
      @close="topicFlag=false"
    />

    <InterfaceModal ref="serviceInfoDialog"/>

    <SelectScSituationIndexInfoModalNew ref="selectScSituationIndexInfoModalNew" />

  </div>
</template>
<script>
import $ from 'jquery'
import { getAction } from '@/api/manage'
import ScSituationIndexInfoModal from '@/views/indexManage/modules/ScSituationIndexInfoModal'
import SysDataSourceModal from '@/views/dataSource/modules/SysDataSourceModal'
import TopicEditModal from '@/views/modelManage/modules/TopicEditModal'
import InterfaceModal from '@/views/modelManage/modules/InterfaceModal'
import SelectScSituationIndexInfoModalNew from '@/views/indexManage/modules/SelectScSituationIndexInfoModalNew'
export default {
  components: {
    ScSituationIndexInfoModal,
    SysDataSourceModal,
    TopicEditModal,
    InterfaceModal,
    SelectScSituationIndexInfoModalNew
  },
  data() {
    return {
      visible: false,
      typeOptions: [
        { label: '关联数据源信息', value: 'source' },
        { label: '创建指标信息', value: 'index' },
        { label: '创建模型信息', value: 'topic' },
        { label: '创建接口信息', value: 'service' }
      ],
      indexCatalogArr: [],
      tableData: [],
      // 表头
      columns: [
        {
          title: '指标专题',
          align: 'center',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' },
          ellipsis: true
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'count',
          key: 'count',
          ellipsis: true
        },
        {
          title: '详细信息',
          align: 'center',
          dataIndex: 'countList',
          key: 'countList',
          scopedSlots: { customRender: 'countList' },
          ellipsis: true
        }
      ],
      tableWidth: 1000,
      tableHeight: 700,
      topicId: '',
      infoType: '',
      replaceFields: {
        children: 'childList',
        title: 'catalogName',
        key: 'id',
        value: 'id'
      },
      tableFlag: false,
      topicFlag: false,
      topicKey: ''
    }
  },
  created() {
    this.getIndexCatalogArr()
  },
  mounted() {
    // 获取容器当前高度，重设表格的最大高度
    this.getTableMaxHeight()

    window.onresize = () => {
      this.getTableMaxHeight()// 获取容器当前高度，重设表格的最大高度
    }
  },
  methods: {
    show(id, type) {
      this.topicId = id
      this.infoType = type
      this.visible = true
      this.getTopicInfo()
    },
    handleCancel() {
      this.$emit('cancel')
      this.visible = false
    },
    // 获取容器当前高度，重设表格的最大高度
    getTableMaxHeight() {
      this.$nextTick(() => {
        this.tableHeight = $(window).height() - 200 - 76 - 115 - 46
      })
    },
    // 获取指标专题分类树
    getIndexCatalogArr() {
      this.indexCatalogArr = []
      getAction('/index/config/queryIndexCatalog', {}).then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          this.indexCatalogArr = res.result
        }
      })
    },
    // 获取指标专题详情
    getTopicInfo() {
      this.tableFlag = false
      getAction('/index/config/getIndexCount', {
        parentId: this.topicId,
        type: this.infoType
      }).then(res => {
        if (res.success) {
          // 查找有无父节点

          const index = res.result.findIndex(item => item.parent === true)
          if (index === -1) {
            this.tableData = res.result
          } else {
            const tempArr = []
            res.result[index].children = []
            tempArr.push(res.result[index])
            res.result.map(item => {
              if (!item.parent) tempArr[0].children.push(item)
            })

            this.tableData = tempArr
          }

          this.tableFlag = true
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 显示各类型详情弹窗
    showInfoDialog(id) {
      if (this.infoType === 'index') {
        getAction('/index/scSituationIndexDetail/queryById', { id }).then(res => {
          if (res.success) {
            this.$refs.selectScSituationIndexInfoModalNew.view(res.result)
          } else {
            this.$message.error(res.message)
          }
        })
      }

      if (this.infoType === 'source') {
        getAction('/sys/dataSource/list', { code: id }).then(res => {
          if (res.success) {
            this.$refs.dataSourceInfoDialog.edit(res.result.records[0])
            this.$refs.dataSourceInfoDialog.title = '详情'
            this.$refs.dataSourceInfoDialog.disableSubmit = true
          } else {
            this.$message.error(res.message)
          }
        })
      }

      if (this.infoType === 'topic') {
        this.topicFlag = true
        this.topicKey = id
      }

      if (this.infoType === 'service') {
        getAction('/index/scSituationIndexTopicServ/list', { id }).then(res => {
          if (res.success) {
            this.$refs.serviceInfoDialog.edit(res.result.records[0])
            this.$refs.serviceInfoDialog.title = '详情'
            this.$refs.serviceInfoDialog.disableSubmit = true
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.topic-list-dialog {

}
</style>
<style lang="less">
.topic-list-dialog {
  .ant-modal-body {
    padding: 10px 15px;
    height: calc(100vh - 308px);
  }

  .ant-table-tbody > tr > td {
    max-width: 200px;
    min-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
